<template>
	<view class="content">
		<u-navbar leftText="返回" :fixed="true" title="极奥赛事助理" :safeAreaInsetTop="true" bgColor="none" leftIconColor="#fff"
			@leftClick="leftClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="home" size="0" color="#fff"></u-icon>
			</view>
		</u-navbar>
		
		<view class="banner">
			<u-swiper :list="banner" indicator indicatorMode="line" height="180" circular @click="banner_to"></u-swiper><!--imgMode='widthFix'-->
		</view>
		
		<view class="game_list" v-if="game_list.length > 0">
			<u-row customStyle="margin-bottom: 15px; background:#fff; border-radius:10px;padding: 10px"
				v-for="(item, index) in game_list" :key="index" @tap="gotopage(item.huodong_id)">
				<u-col span="4">
					<view class="list_col_l">
						<u--image width="100%" height="100" mode='aspectFill' :src="item.photo"></u--image>
					</view>
				</u-col>
				<u-col span="8">
					<view class="list_col_r">
						<h3>{{item.title}}</h3>
						<h5>比赛时间：{{item.startdate}}</h5>
						<view class="list_col_bottom">
							￥{{item.price}}<span>{{item.address}}</span>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			<u-gap height="10" bg-color="#eee"></u-gap>
		</view>
		
		<view v-else class="empty_style">
			暂无数据
		</view>
	</view>
</template>

<script>
	import * as homeApi from '@/api/home'
	export default {
		data() {
			return {
				banner: [
					'http://cdn.hzim.org/s/f/image/2023/03/08/15/20230308151251889.jpg',
					'http://cdn.hzim.org/s/f/image/2023/03/08/15/20230308151251889.jpg',
					'http://cdn.hzim.org/s/f/image/2023/03/08/15/20230308151251889.jpg',
				],
				datamore: true,
				page: 1,
				pageSize: 10,
				game_list: [],
				loadStatus: 'loadmore',
			}
		},
		onShow() {
			this.addRandomData();
		},
		methods: {
			onReachBottom() {
				if (this.datamore == false) {
					this.loadStatus = 'nomore';
					return false;
				} else {
					this.loadStatus = 'loading';
					this.addRandomData();
				}
			},
			addRandomData() {
				homeApi.case_list({
						page: this.page,
						pageSize: this.pageSize,
						category_id: ""
					})
					.then(result => {
						console.log(result)
						if (this.page * this.pageSize > result.data.total) {
							this.datamore = false
							this.loadStatus = 'nomore';
						}

						this.game_list = this.game_list.concat(result.data.list)
						
						this.page++;
					})
					.catch((e) => console.log(e))
			},
			onPullDownRefresh() {
				this.game_list = [];
				this.page = 1;
				this.datamore = true
				this.addRandomData();
			},
			gotopage(game_id) {
				uni.navigateTo({
					url: '/pages/index/detail?game_id=' + game_id
				})
			},
			banner_to(index){
				//console.log(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background: #eee url('https://service.ayqqf.com/miniimages/bg.png') no-repeat;
		background-size: 100%;
		font-size: 12px;
		padding-top: 60px;
	}

	.banner {
		width: 96%;
		margin: 0 auto;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.game_list {
		width: 94%;
		margin: 10px auto 0 auto;
	}

	.list_col_l {
		position: relative;
		margin-right: 10px;
	}

	.list_col_r {
		position: relative;
		height: 100px;
	}

	.list_col_r h3 {
		font-size: 14px;
		max-height: 38px;
		overflow: hidden;
	}

	.list_col_r h5 {
		font-size: 11px;
		margin-top: 5px;
		color: #999;
	}

	.list_col_bottom {
		position: absolute;
		bottom: 10px;
		width: 100%;
		color: #F5222D;
		display: flex;
	}

	.list_col_bottom span {
		text-align: right;
		display: 0;
		width: 100%;
		color: #999;
		font-size: 11px;
	}

	.empty_style {
		text-align: center;
		padding: 100px 0;
	}
</style>
